<template>
	<view class="weather">
		<view class="city_search">
			<input type="text" v-model="weatherCity" placeholder="请输入您所要查询的城市" />
			<button @click="tips()" type="primary">查询</button>
		</view>
		<view class="show_weather" v-show="isShow">
			<view class="header">
				<view class="time">
					<text>发布:</text>
					<text>{{ weatherList.time }}</text>
				</view>
				<view class="bottom">
					<view class="left">
						<text class="city">{{ weatherList.city }}</text>
						<view class="wind">{{ weatherList.win }}</view>
					</view>
					<view class="right">
						<image :src="weatherPic" mode=""></image>
						<text>{{ weatherList.weather }}</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="item">
					<view class="tip">air</view>
					<view class="footer_header">空气评估</view>
					<view class="list">
						<view class="airPm25">
							<text>pm25</text>
							<text>{{ weatherList.air_pm25 }}</text>
						</view>
						<view class="air_level">
							<text>空气质量</text>
							<text>{{ weatherList.air_level }}</text>
						</view>
						<view class="air">
							<text>空气指数</text>
							<text>{{ weatherList.air }}</text>
						</view>
					</view>
					<view class="Tips">
						<text>Tips:</text>
						<text>{{ weatherList.air_tips }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import amapFile from '../../util/amap-wx.js';
export default {
	data() {
		return {
			weatherCity: '',
			weatherList: [],
			weatherPic: '',
			isShow: false,
			amapPlugin: null,
			key: '6cde5c9c7e7ca8e000616bad1e68fcfb'
		};
	},
	onLoad() {
		this.getLocation();
	},
	methods: {
		// 提示输入内容不能为空
		tips() {
			if (this.weatherCity !== '') {
				this.getContent();
			} else {
				uni.showToast({
					title: '不能为空哟',
					icon: 'none'
				});
			}
		},
		// 获取当地位置
		getLocation() {
			const myAmapFun = new amapFile.AMapWX({ key: '6cde5c9c7e7ca8e000616bad1e68fcfb' });
			myAmapFun.getRegeo({
				success: res => {
					//成功回调
					// console.log(res[0].regeocodeData.addressComponent.district);
					this.weatherCity = res[0].regeocodeData.addressComponent.district.replace('区', '');
					this.getContent();
				},
				fail: info => {
					//失败回调
					console.log(info);
				}
			});
		},
		// 获取信息
		async getContent() {
			const res = await this.$myRequest({
				url: '/?s=App.Common_Weather.LiveWeather',
				method: 'post',
				data: {
					city: this.weatherCity,
					app_key: 'FF119DFB40E63EE8DFD7C74C8A9A4B8D'
				}
			});
			this.weatherList = res.data.data.weather;
			// console.log(this.weatherList);
			this.weatherPic = 'http://pic.liyunxing.top/tooools/weather/' + res.data.data.weather.weather + '.png';
			this.isShow = true;
		}
	}
};
</script>

<style lang="scss">
.weather {
	.city_search {
		width: 85%;
		height: 80rpx;
		display: flex;
		margin: 30rpx auto;

		input {
			border: 1rpx solid #eee;
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-right: 10rpx;
			border-radius: 20rpx;
		}

		button {
			height: 100%;
			border: none;
			line-height: 80rpx;
		}
	}

	.show_weather {
		.header {
			height: 300rpx;
			background: #df9ad0;
			color: #fff;
			padding: 20rpx 0;

			.time {
				font-size: 30rpx;
				margin-left: 50rpx;
				margin-top: 20rpx;
			}

			.bottom {
				display: flex;

				.left {
					width: 50%;

					.city {
						display: block;
						font-size: 80rpx;
						margin-top: 20rpx;
						margin-left: 50rpx;
					}

					.wind {
						margin-left: 50rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					width: 50%;
					display: flex;
					flex-direction: column;
					text-align: center;

					image {
						width: 200rpx;
						height: 200rpx;
						margin: 0 auto;
					}
				}
			}
		}

		.footer {
			.item {
				width: 85%;
				height: auto;
				border: 1px solid #4cd964;
				margin: 20rpx auto;
				padding: 20rpx;
				position: relative;
				border-radius: 20rpx;
				.tip {
					width: 70rpx;
					height: 70rpx;
					border: 1px solid #4cd964;
					border-radius: 50%;
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 30rpx;
				}
				.footer_header {
					height: 20%;
					text-align: center;
					font-size: 50rpx;
					margin: 20rpx 0;
				}
				.list {
					display: flex;
					justify-content: space-around;
					height: 70%;
					view {
						width: 33%;
						display: flex;
						flex-direction: column;
						text-align: center;
					}
					view:nth-child(2) {
						border-right: 1px solid #555;
						border-left: 1px solid #555;
					}
				}
				.air_tips {
					margin-top: 30rpx;
				}
			}
		}
	}
}
</style>
